// 移动端响应式样式
// 仅在移动端设备上生效，不影响PC端的样式和功能

// 设置移动端视口
@media screen and (max-width: 768px) {
  // 全局样式调整
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    min-width: auto !important; // 覆盖可能的最小宽度限制
  }

  // 通用容器适配
  .container, .el-container, .app-container {
    width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
    overflow-x: hidden;
  }
  
  // 表格适配
  .el-table {
    width: 100% !important;
    overflow-x: auto;
    
    th, td {
      min-width: 80px;  // 保证内容不会太挤
    }
  }

  // 表单适配
  .el-form {
    .el-form-item {
      margin-bottom: 15px;
      
      .el-form-item__label {
        float: none;
        display: block;
        text-align: left;
        width: 100% !important;
        padding: 0 0 8px;
      }
      
      .el-form-item__content {
        margin-left: 0 !important;
        width: 100%;
      }
    }
  }

  // Dialog 弹窗适配
  .el-dialog {
    width: 90% !important;
    margin: 10px auto !important;
    
    .el-dialog__body {
      padding: 10px;
      max-height: 70vh;
      overflow-y: auto;
    }
  }

  // 卡片适配
  .el-card {
    width: 100% !important;
  }

  // 按钮组适配
  .el-button-group, .operation-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    
    .el-button {
      margin: 0 !important;
      flex: 0 0 auto;
    }
  }

  // 导航适配
  .el-menu {
    .el-submenu__title, .el-menu-item {
      font-size: 14px;
      height: 50px;
      line-height: 50px;
    }
  }

  // 布局适配 - 移动端侧边栏适配（浮动覆盖样式）
  .app-wrapper {
    .main-container {
      margin-left: 0 !important;
      transition: all 0.3s;
      // 移除sidebar-open类的额外样式，保证内容区域不会被推动
    }
    
    .sidebar-container {
      width: 80% !important;
      max-width: 300px !important;
      position: fixed !important;
      height: 100% !important;
      top: 0 !important;
      left: -100% !important; // 初始位置在屏幕左侧外
      transition: left 0.3s ease !important;
      z-index: 2000 !important; // 确保在遮罩层上方
      overflow-y: auto !important;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15) !important;
      
      &.sidebar-open {
        left: 0 !important; // 显示时移动到屏幕内
      }
    }
    
    // 确保侧边栏在移动端正确显示
    &.mobile {
      .sidebar-container {
        transform: none !important; // 移除transform，使用left属性控制
      }
    }
  }

  // 头部适配
  .navbar {
    .hamburger-container {
      display: block !important;
    }
  }

  // 输入框适配
  .el-input, .el-select {
    width: 100% !important;
  }

  // 日期选择器适配
  .el-date-picker, .el-date-editor {
    width: 100% !important;
  }

  // 选项卡适配
  .el-tabs__header {
    .el-tabs__item {
      padding: 0 10px;
    }
  }
  
  // 分页器适配
  .el-pagination {
    text-align: center;
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
    .el-pagination__total, .el-pagination__sizes, .btn-prev, .btn-next {
      margin: 5px 3px;
    }
  }

  // 去除不必要的padding和margin
  .no-padding-in-mobile {
    padding: 0 !important;
  }

  // 移除遮罩层，仅保留一个空的元素以兼容现有代码
  .sidebar-overlay {
    display: none;
    
    &.active {
      display: none;
    }
  }
}

// 移动端特定组件的Vant样式覆盖
@media screen and (max-width: 768px) {
  .mobile-only {
    display: block;
  }
  
  .pc-only {
    display: none !important;
  }
  
  .van-nav-bar {
    height: 46px;
    
    .van-nav-bar__title {
      font-size: 16px;
    }
  }
  
  .van-cell {
    font-size: 14px;
  }
}

// PC端特定样式
@media screen and (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }
  
  .pc-only {
    display: block;
  }
}

// 修复一些常见问题
.el-table__fixed, .el-table__fixed-right {
  @media screen and (max-width: 768px) {
    display: none !important;
  }
}

// 确保图片不会溢出容器
img {
  max-width: 100%;
  height: auto;
} 